<%@ page language="java" import="com.yoyo.itravel.constants.UserConstant" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="css/amazeui.min.css"/>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="css/zpwd/zpwd.css"/>
    <link rel="stylesheet" href="css/sui.css"/>
    <script type="text/javascript" src="js/sui.js"></script>
    <title>找回密码</title>
    <style>
        /*.bottomLine {
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            margin-bottom: 10px;
            /*padding: 10px;*/
        /*padding-top: 10px;
        padding-bottom: 10px;
        word-spacing: 0.05rem;
        text-align: center;
        margin-top: 82px;*/
        /*width:677px ;*/
        /*line-height: ;*/
        /*}*/
        .bottomLine {
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            padding-top: 8px;
            /*padding-bottom:10px;*/

        }

        .bot {
            margin-bottom: 50px;
            /*text-align: center;*/
            color: #7b6f5b;
        }

        .radio-pretty.checked > span:before {
            color: #f88600;
        }

        input {
            height: 62px;
        }
    </style>
</head>

<body>
<!--<div class="am-g" style="margin-top: 25px;">

</div>-->
<div class="am-g" style="margin-top: 40px;">
    <div class="logo">
        <img src="images/logo.png"/>
        <span style="font-size: 30px;font-weight: bolder;">找回密码</span>
    </div>
    <div style="width: 1200px;margin: 0 auto;font-size: 12px;margin-top: -38px;">
        <span style="float: right;color: #333333;">
            <span style="margin-left: 20px;margin-right: 20px;"></span>
            <a href="forget_pwd.jsp" style="font-size: 14px;">返回</a>
            <span style="margin-left: 20px;margin-right: 20px;">|</span>
            <a href="login.jsp" style="font-size: 14px;">登录</a>
            <span style="margin-left: 20px;margin-right: 20px;">|</span>
            <a href="register.jsp" style="font-size: 14px;">注册</a>
        </span>
    </div>
</div>
<div style="background-color: #ffffff;padding-top: 30px;margin-top: 45px;border-top: 1px #e2e2e2 solid;">
    <div class="am-g content" style="margin-top: 15px;">
        <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
            <ul class="am-tabs-nav am-cf" style="margin-top: 14px;">
                <li class="" style="max-width: 95px; margin-left: 100px;"></li>
                <li class="am-active"><a style="cursor: default;"><span
                        class="am-badge am-round am-badge-warning-active ">1</span>输入账户名</a></li>
                <li class="" id="step2_li"><a style="cursor: default;" id="step2"><span class="am-badge  am-round"
                                                                                        id="step2_span">2</span>验证身份</a>
                </li>
                <li class="" id="step3_li"><a style="cursor: default;" id="step3"><span class="am-badge  am-round"
                                                                                        id="step3_span">3</span>重置密码</a>
                </li>
                <li class="" id="step4_li"><a style="cursor: default;" id="step4"><span class="am-badge  am-round"
                                                                                        id="step4_span">4</span>重置成功</a>
                </li>
                <li class="" style="    max-width: 95px;margin-right: 100px;"></li>
            </ul>

            <!--输入账户名-->
            <div class="am-tabs-bd" style="margin-left: -20px;">
                <div data-tab-panel-0 class="am-tab-panel am-active" style="margin-top: 50px;" id="step1_div">
                    <div class="am-g">
                        <div class="am-u-sm-7 am-u-sm-offset-3 "><span class="left1"></span>
                            <input id="phone_input" type="text" placeholder="请输入您的手机号" class="am-form-field"
                                   style="margin: auto;display: block;float: left;padding-left: 57px;width: 562px;margin-left: 10px;"/>
                        </div>
                        <div class="am-u-sm-1 am-u-end" style="padding: 10px;">
                            <span class="right" style="display: none;"></span>
                        </div>
                    </div>
                    <div class="am-g" style="margin-top: 37px;">
                        <div class="am-u-sm-7 am-u-sm-offset-3" style="padding-right: 0rem;"><span class="left2"></span>
                            <input id="verify_code" oninput="checkVerify('verify_code', 'nextBtn')" type="text"
                                   placeholder="请输入验证码" class="am-form-field"
                                   style="margin: auto;display: block;float: left;padding-left: 55px;width: 330px;margin-left: 10px;border-right: 0px;"/>
                            <button id="code" onclick="createCode('code');" title='点击更换验证码'
                                    class="am-btn am-btn-default"
                                    style="width: 232px;float: left;height: 62px;font-size: 34px;">
                            </button>
                        </div>
                    </div>

                    <div class="am-g" style="margin-top:40px;">
                        <div class="am-u-sm-7 am-u-sm-offset-3 ">
                            <button disabled id="nextBtn"
                                    onclick="retrievePwdByPhoneStep1('phone_input', 'verify_code');"
                                    type="button" class="am-btn am-btn-warning"
                                    style="width: 562px;padding: 20px;border: 1px rgba(187, 187, 187, 0.5) solid;margin-left: 10px;">
                                <font style="font-size: 20px;font-weight: bold;">下一步</font></button>
                        </div>
                    </div>
                </div>
                <!--验证身份-->
                <div data-tab-panel-1 class="am-tab-panel " style="margin-top:23px;" id="step2_div">
                    <div class="am-g">
                        <div class="am-u-sm-6 am-u-sm-offset-3 ">
                            <p style="font-size: 16px;color: #333333;margin-left: 20px;">已验证手机号:<span
                                    id="email_span"></span></p>
                        </div>
                    </div>
                    <form id="retrieve_pwd_from">
                        <div class="am-g" style="margin-top: 15px;">
                            <div class="am-u-sm-7 am-u-sm-offset-3" style="padding-right: 0rem;"><span class="left2"
                                                                                                       style="left: 40px;"></span>
                                <input type="text" placeholder="请输入验证码" id="verify_code2" class="am-form-field"
                                       oninput="checkVerify('verify_code2', 'nextBtn2')"
                                       style="margin: auto;display: block;float: left;padding-left: 55px;width: 330px;margin-left: 20px;border-right: 0px;"/>
                                <input type="button" class="am-btn am-btn-default" id="codeBtn"
                                       onclick="sendPhoneIgnoreValidate('phone_input', 'codeBtn');"
                                       style="width: 232px;float: left;height: 62px;font-size: 14px;" value="获取验证码"
                                />
                            </div>
                        </div>
                        <div class="am-g" style="margin-top: 58px;margin-bottom: 15px;">
                            <div class="am-u-sm-6 am-u-sm-offset-3 ">
                                <button type="button" class="am-btn am-btn-warning"
                                        onclick="retrievePwdByPhoneStep2('verify_code2');"
                                        style="width: 562px;height: 62px;font-size: 20px;font-weight: bold;border: 1px rgba(187, 187, 187, 0.5) solid;margin-left: 20px;">
                                    下一步
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <!--重置密码-->
                <div data-tab-panel-2 class="am-tab-panel" id="step3_div">
                    <!--<div class="am-g"> <div class="am-u-sm-12" style="text-align: center;"> <img src="img/lion.png" /> </div> </div>-->
                    <div class="am-g" style="margin-top: 60px;">
                        <div class="am-u-sm-7 am-u-sm-offset-3 ">
                            <img src="images/correct.png" style="margin-left: 60px;margin-top: -5px;"/><span
                                style="margin-left: 13px;font-size: 12px;">验证已成功,您可以设置新的密码!</span>
                        </div>
                    </div>
                    <div class="am-g" style="margin-top: 15px;">
                        <div class="am-u-sm-7 am-u-sm-offset-3 "><span
                                style="float: left;font-size: 14px;font-weight: bold;margin-top: 20px;">新密码:</span>
                            <input type="password" id="new_pwd" placeholder="请输入新的密码" class="am-form-field"
                                   style="font-size: 24px;margin: auto;display: block;float: left;padding-left: 30px;width: 562px;margin-left: 10px;"
                                   onchange="checkPassword('new_pwd')"
                                   onblur="checkPassword('new_pwd')"
                            />
                        </div>
                        <img src="" id="new_pwd_img"
                             style="left: -150px;margin-top: 17px;position: relative;z-index: 44">
                        <div class=" am-u-sm-1 am-u-end" style="padding-left: 110px;">
                            <span class="right" id="new_pwd_err" style="display: block;"></span>
                        </div>
                    </div>
                    <div class="am-g" style="margin-top: 18px;">
                        <div class="am-u-sm-7 am-u-sm-offset-3 ">
								<span style="margin-left: 55px">
									不能包含空格，密码长度8~16，必须包含数字、字母、符号中至少两种。
								</span>
                        </div>
                    </div>
                    <div class="am-g" style="margin-top: 20px;">
                        <div class="am-u-sm-7 am-u-sm-offset-3 "><span
                                style="float: left;font-size: 14px;font-weight: bold;margin-top: 20px;margin-left: -14px;">确认密码:</span>
                            <input id="re_new_pwd" type="password" placeholder="请再次输入新密码" class="am-form-field"
                                   style="font-size: 24px;margin: auto;display: block;float: left;padding-left: 30px;width: 562px;margin-left: 10px;"
                                   onchange="checkRepassword('new_pwd', 're_new_pwd')"
                                   onblur="checkRepassword('new_pwd', 're_new_pwd')"
                            />
                        </div>
                        <img src="" id="re_new_pwd_img"
                             style="left: -150px;margin-top: 17px;position: relative;z-index: 44">
                        <div class=" am-u-sm-1 am-u-end" style="padding-left: 110px;">
                            <span class="right" id="re_new_pwd_err" style="display: block;"></span>
                        </div>
                    </div>
                    <div class="am-g" style="margin-top: 60px;">
                        <div class="am-u-sm-7 am-u-sm-offset-3 ">
                            <button type="button" class="am-btn am-btn-warning"
                                    onclick="retrievePwdStep3('email_input', 'new_pwd', 're_new_pwd');"
                                    style="width: 562px;height: 62px;font-size: 20px;font-weight: bold;border: 1px rgba(187, 187, 187, 0.5)B solid;margin-left: 57px;">
                                下一步
                            </button>
                        </div>
                    </div>
                </div>
                <!--重置成功-->
                <div data-tab-panel-2 class="am-tab-panel " id="step4_div">
                    <div class="am-g" style="margin-top: 129px;">
                        <div class="am-u-sm-6 am-u-sm-offset-3 " style="    text-align: center;">
                            <h2 style="color: #8F8F8F;font-size: 20px;">恭喜您，成功找回密码，请牢记新登录密码!</h2></div>
                    </div>
                    <div class="am-g" style="margin-top: 145px;">
                        <div class="am-u-sm-6 am-u-sm-offset-3 " style="text-align: center;">
                            <a href="login.jsp">
                                <button type="button" class="am-btn am-btn-warning"
                                        style="width: 236px;height: 62px;font-size: 20px;font-weight: bold;border: 1px rgba(187, 187, 187, 0.5) solid;margin-top: -50px;">
                                    立即登录
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="footer2.jsp"></jsp:include>
</div>

<script src="js/common.js"></script>
<script src="js/register.js"></script>
</body>

</html>